import { Spin, Anchor } from 'antd';
import {} from 'react';
import Select from './components/selectQ';
import Short from './components/shortQ';
import Treatise from './components/treatiseQ';

type AnchorIdType = {
  [props: string]: questionAnType;
};

type questionAnType = {
  /** dom 的id */
  id: string;
  /** 在锚点的标题 */
  title: string;
  /** 描述文本 */
  discript: string;

  children?: questionAnType[];
};

export const AnchorId: AnchorIdType = {
  questionSelect: {
    id: 'components-question-select',
    title: '选择题',
    discript: '单项选择题（本大题共25小题，每小题2分，共50分。）',
  },
  questionShort: {
    id: 'components-question-short',
    title: '简答题',
    discript: '简答题（本大题共5小题，每小题6分，共30分。）',
  },
  questionTreatise: {
    id: 'components-question-treatise',
    title: '论述题',
    discript: '论述题（本大题共3小题，任选其中2题作答，每小题10分，共20分。）',
  },
};

export function SelectList({ list }: { list: request.SelectType[] }) {
  const res =
    list &&
    list.length > 0 &&
    list.map((element, index) => <Select data={{ ...element, index }} key={element.id} />);
  const { discript, id } = AnchorId['questionSelect'];
  return (
    <div>
      <h2 id={id}>一、{discript}</h2>
      {res || (
        <div style={{ padding: 100, textAlign: 'center' }}>
          <Spin spinning={true} size="large" />
        </div>
      )}
    </div>
  );
}

export function ShortList({ list }: { list: request.ShortType[] }) {
  const res =
    list &&
    list.length > 0 &&
    list.map((element, index) => <Short data={{ ...element, index }} key={element.id} />);
  const { discript, id } = AnchorId['questionShort'];

  return (
    <div>
      <h2 id={id}>二、{discript}</h2>
      {res || (
        <div style={{ padding: 100, textAlign: 'center' }}>
          <Spin spinning={true} size="large" />
        </div>
      )}
    </div>
  );
}

export function TreatiseList({ list }: { list: request.TreatiseType[] }) {
  const res =
    list &&
    list.length > 0 &&
    list.map((element, index) => <Treatise data={{ ...element, index }} key={element.id} />);
  const { discript, id } = AnchorId['questionTreatise'];

  return (
    <div>
      <h2 id={id}>三、{discript}</h2>
      {res || (
        <div style={{ padding: 100, textAlign: 'center' }}>
          <Spin spinning={true} size="large" />
        </div>
      )}
    </div>
  );
}

export function AnchorDom(prop) {
  /** 自定义锚点 */
  // const getCurrentAnchor = () => `#${prop.data.id}`;
  function recursion(data: questionAnType[]) {
    return data.map((el) => {
      return (
        <Anchor.Link key="id" href={`#${el.id}`} title={el.title}>
          {el.children && recursion(el.children)}
        </Anchor.Link>
      );
    });
  }

  return (
    <Anchor {...prop.data} affix={false}>
      {Object.keys(AnchorId).map((key) => recursion(new Array(AnchorId[key])))}
    </Anchor>
  );
}
